<template>
  <div class="searchChart">
    <div class="chart-header">
      <span>{{ chartData.title }}</span>
      <svg
        t="1628562000691"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1972"
        width="16"
        height="16"
      >
        <path
          d="M512 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z m0-844.8c-206.506667 0-375.466667 168.96-375.466667 375.466667 0 206.506667 168.96 375.466667 375.466667 375.466667 206.506667 0 375.466667-168.96 375.466667-375.466667 0-206.506667-168.96-375.466667-375.466667-375.466667z"
          p-id="1973"
          fill="#cdcdcd"
        ></path>
        <path
          d="M512 796.714667a46.08 46.08 0 0 1-46.933333-46.933334v-269.056c0-26.624 20.352-46.933333 46.933333-46.933333 26.581333 0 46.933333 20.309333 46.933333 46.933333v269.056c0 26.624-20.352 46.933333-46.933333 46.933334zM512 364.928a46.08 46.08 0 0 1-46.933333-46.933333V274.218667c0-26.624 20.352-46.933333 46.933333-46.933334 26.581333 0 46.933333 20.309333 46.933333 46.933334v43.776c0 26.624-21.888 46.933333-46.933333 46.933333z"
          p-id="1974"
          fill="#cdcdcd"
        ></path>
      </svg>
    </div>
    <div class="chart-value">
      <span>{{ chartData.value }}</span>
      <span class="search-chart-percent">{{ chartData.percent }}</span>
      <svg
        v-if="chartData.percent > 0"
        t="1628563128128"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="14305"
        width="12"
        height="12"
      >
        <path
          d="M534.603 290.086l383.252 417.63c11.203 12.207 10.388 31.185-1.82 42.387A30 30 0 0 1 895.753 758H129.248c-16.568 0-30-13.431-30-30a30 30 0 0 1 7.897-20.284l383.252-417.63c11.202-12.207 30.18-13.022 42.387-1.82a30 30 0 0 1 1.82 1.82z"
          fill="#d81e06"
          p-id="14306"
        ></path>
      </svg>
      <svg
        v-else
        t="1628563024404"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="12767"
        width="12"
        height="12"
      >
        <path
          d="M540.736 738.56l371.744-406.912a33.984 33.984 0 0 0-4.096-50.048 39.36 39.36 0 0 0-24.64-8.544H140.256c-20.896 0-37.824 15.904-37.824 35.52 0 8.448 3.232 16.64 9.12 23.072L483.264 738.56a39.584 39.584 0 0 0 57.472 0z"
          p-id="12768"
          fill="green"
        ></path>
      </svg>
    </div>
    <div class="chart" ref="myline"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
export default {
  name: 'SearchChart',
  mixins: [resize],
  props: {
    chartData: Object
  },
  mounted() {
    // 注意必须要给chart给宽高
    // 初始化
    this.myEchart = echarts.init(this.$refs.myline)
    this.myEchart.setOption({
      xAxis: {
        type: 'category',
        show: false,
        // 轴两边的距离
        boundaryGap: false
      },
      yAxis: {
        show: false
      },

      series: {
        type: 'line',
        data: [15, 20, 35, 25, 19, 20, 30, 15],
        // 曲线平滑
        smooth: true,
        // 拐点不显示
        itemStyle: {
          opacity: 0
        },
        // 设置鼠标移上没有hover效果
        silent: true,
        // 区域填充，线性渐变
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#d3bcf4' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#fff' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      }
    })
  }
}
</script>

<style lang="sass" scoped>
.chart
 width:100%
 height:100px

 .chart-header
  font-size: 14px
  display:flex
.chart-value
  margin:20px 0
.search-chart-percent
  margin:0px 10px 0 25px
  font-size:14px
</style>
